<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <div style="display: flex; flex-direction: row">
          <a-row style="width: 60%">
            <a-col :span="12">
              <a-form-model-item label="英克码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bar">
                <a-input v-model="model.bar" placeholder="请输入英克码" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="UDI" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="udi">
                <a-input v-model="model.udi" placeholder="请输入UDI" :disabled="udiError"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="产品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productName">
                <a-input v-model="model.productName" placeholder="请输入产品名称"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="批号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="batch">
                <a-input v-model="model.batch" placeholder="请输入批号"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="最小标识" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="flagC">
                <a-input v-model="model.productZxxsdycpbs" placeholder="请输入(30)标识"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12" v-if="show20">
              <a-form-model-item label="(30)标识" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="flagC">
                <a-input v-model="model.flagC" placeholder="请输入(30)标识"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="show30">
              <a-form-model-item label="(20)标识" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="flagD">
                <a-input v-model="model.flagD" placeholder="请输入(20)标识"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="序号91" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="serialNumberA">
                <a-input v-model="model.serialNumberA" placeholder="请输入序号91"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="序号21" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="serialNumberB">
                <a-input v-model="model.serialNumberB" placeholder="请输入序号21"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="产品规格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productSpec">
                <a-input v-model="model.productSpec" placeholder="请输入产品规格"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="注册证" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="zczbhhzbapzbh">
                <a-input v-model="model.zczbhhzbapzbh" placeholder="请输入注册证"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="生产日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="manufacture">
                <!-- <a-input v-model="model.manufacture" placeholder="请输入生产日期"></a-input> -->
                <a-date-picker v-model="model.manufacture" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="有效期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="manufacture">
                <a-input v-model="model.validity" placeholder="请输入生产日期"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row style="width: 40%">
            <a-col :span="24">
              <a-form-model-item label="实物图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bar">
                <img
                  style="width: 400px; height: 400px"
                  class="fit-picture"
                  :src="imgSrc"
                  alt="暂无图片"
                  @click="showImage()"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
      </a-form-model>
    </j-form-container>
    <!-- 大图弹出层 -->
    <div v-if="showModal" class="modal">
      <span class="close" @click="hideImage">&times;</span>
      <img :src="imgSrc" alt="暂无图片" />
    </div>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import { queryYkCodeDetail } from '@/api/warehouse'
export default {
  name: 'YkCodeForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      showModal: false,
      model: {},
      udiError:false,
      imgSrc: '',
      manufacture: '', // 生产日期
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        edit: '/wms/wmsBarBindOrderDetail/editBarInfo',
      },
      searchKey: null,
      dataSource: [],
      columns: [
        {
          title: '规格',
          dataIndex: 'productSpec',
          key: 'productSpec',
          width: 120,
        },
        {
          title: '产品名称',
          dataIndex: 'productName',
          key: 'productName',
        },
        {
          title: '批次',
          dataIndex: 'batch',
          key: 'batch',
          width: 200,
        },
      ],
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    // udiError() {
    //   try {
    //     let flag = false
    //     let udi = this.model.udi
    //     console.log(udi);
    //     const subStr = 'error'
    //     if (!udi.includes(subStr)) {
    //       flag = true
    //     }
    //     return flag
    //   } catch (error) {
    //     console.log(error)
    //   }
    // },
    show20() {
      let flag = false
      let udi = this.model.udi
      const hasMatch = /\((20)\)/.test(udi)
      if (hasMatch) {
        return (flag = true)
      }
      return flag
    },
    show30() {
      let flag = false
      let udi = this.model.udi
      const hasMatch = /\((30)\)/.test(udi)
      if (hasMatch) {
        return (flag = true)
      }
      return flag
    },

    // total() {
    //   let num = 0
    //   const { dataSource } = this
    //   dataSource.forEach((e) => {
    //     num += e.sums
    //   })
    //   return num
    // },
  },
  created() {
    // 备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    showImage() {
      this.showModal = true
    },
    hideImage() {
      this.showModal = false
    },
    async edit(record) {
      let that = this
      try {
        const params = { id: record.id }
        const r = await queryYkCodeDetail(params)
        console.log(r)
        this.model = r.result
        this.udiError = r.result.udi.includes('error') ?  false : true
        this.$nextTick(() => {
          that.imgSrc = window._CONFIG.domianURL + 'sys/common/static/pandian/' + that.model.picUpload + '.jpg'
        })
        this.manufacture = this.$moment(this.model.manufacture, 'YYYY-MM-DD')
        this.dataSource = r.result
      } catch (_) {}
      this.visible = true
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok', this.model)
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.modal {
  display: block;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal img {
  display: block;
  margin: 50px auto;
  max-width: 90%;
  max-height: 90%;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}
</style>

